<template>
<span>
  <el-button plain type="success" @click="paymentpage">缴费查询</el-button>

  <el-dialog :visible.sync="visible.addVisible" title="缴费添加" width="30%">
    <el-form label-width="100px">
      <el-form-item label="缴费金额">
        <el-input v-model="paging.amount"/>
      </el-form-item>
      <el-form-item label="缴费类型">
        <el-select v-model="paging.type" style="width: 100%">
          <el-option value="水费"></el-option>
          <el-option value="电费"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button type="primary" @click="paymentAdd">添加</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</span>

</template>

<script>
import {Unicom} from "../../../../common/utils";
import {addPayment} from "../../../../network/hydropowerApi";

export default {
  name: "payCard",
  data() {
    return {
      companyPage: null,
      visible: {
        addVisible: false,
      },
      paging: {
        companyUuid: null,
        type: null,
        amount: null,
      },
      uuid: null,
      page: {
        page: 1,
        size: 5,
      }
    }
  },
  mounted() {
    this.update();
  },

  methods: {
    //接收父组件传参
    update() {
      Unicom.$on('data', (res) => {
        console.log(res);
        this.companyPage = res.data.records;
      })
    },

    //添加缴费记录
    paymentAdd() {
      addPayment(this.paging).then(res => {
        console.log(res);
        if (res.code === 2000) {
          this.visible.addVisible = false;
          this.paging.amount = null
          this.paging.type = null
        }
      })
    },
    //查询水电费用
    paymentpage() {
      Unicom.$emit('data1')
    },
  },


}
</script>

<style scoped>
</style>